<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="description" content="Description">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css">
    <style>
        html, body, #app {
            height: 100%;
            width: 100%;
            padding: unset;
            margin: unset;
        }

        .el-row {
            height: 100%;
        }

        .login-container > .el-col {
            height: 100%;
        }

        .login-card-container {
            position: relative;
        }

        .login-card {
            position: absolute;
            width: 80%;
            top: 30%;
            transform: translateY(-50%);
            border: unset;
            background-color: #fafafaad;
        }

        .login-card-center {
            left: 50%;
            transform: translateX(-50%);
        }

        .login-card-header {
            text-align: center;
            font-size: 16px;
        }

        .model-tab-container {
            position: absolute;
            width: 80%;
            top: 30%;
            transform: translateY(-50%);
        }

        .el-descriptions-item__content {
            display: none;
        }

        .dialog-add-container > .el-dialog__body {
            max-height: 550px;
            overflow-y: scroll;
        }

        .el-icon-sort {
            transform: rotate(90deg);
        }
        .el-page-header__content {
            width: calc(100% - 92px);
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 登录 -->
    <el-row v-if="action=='login'" class="login-container">
        <el-col :span="24 - loginContainerSpan">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="loginContainerSpan" class="login-card-container">
            <el-card shadow="hover" :class="loginContainerSpan == 24 ? 'login-card-center login-card' : 'login-card'">
                <!--                <div slot="header" class="login-card-header">-->
                <!--                    <strong>登录</strong>-->
                <!--                </div>-->
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input placeholder="请输入用户名" v-model="form.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item style="text-align: right;margin-right: 10px;">
                        <el-button type="primary" @click="onSubmit">{{loginType == 'login' ? '登录' : '注册'}}</el-button>
                    </el-form-item>
                </el-form>
                <el-button type="text" @click="switchLoginType" icon="el-icon-sort">{{loginType != 'login' ? '登录' :
                    '注册'}}
                </el-button>
            </el-card>
            <!--            <el-tabs type="border-card" v-model="activeName" class="model-tab-container">-->
            <!--                <el-tab-pane label="账号密码登录" name="user">-->
            <!--                    -->
            <!--                </el-tab-pane>-->
            <!--                <el-tab-pane label="本地模式" name="second">-->
            <!--                    <el-card shadow="hover" class="login-card">-->
            <!--                        <el-form label-width="80px">-->
            <!--                            <el-form-item label="文档路径">-->
            <!--                                <el-input placeholder="请输入文档路径" v-model="docRootPath"></el-input>-->
            <!--                            </el-form-item>-->
            <!--                            <el-form-item style="text-align: right;margin-right: 10px;">-->
            <!--                                <el-button type="primary" @click="onSubmit">打开文档</el-button>-->
            <!--                            </el-form-item>-->
            <!--                        </el-form>-->
            <!--                    </el-card>-->
            <!--                </el-tab-pane>-->
            <!--            </el-tabs>-->
        </el-col>
    </el-row>

    <!-- 文档列表 -->
    <el-row v-if="action=='docList'" :gutter="20" class="doc-list-container" style="margin: unset;">
        <el-col :span="24" style="height: 100%;margin: unset;padding: unset;">
            <el-row id="main-container" :gutter="20" style="height: 100%;margin: unset;padding: unset;">
                <el-col v-if="dialogAddVisible" :span="24">
                    <el-dialog
                            :title="dialogAddTitle"
                            :visible.sync="dialogAddVisible"
                            :close-on-press-escape="false"
                            :close-on-click-modal="false"
                            :fullscreen="docListSpan == 24"
                            width="60%"
                            top="5vh"
                            custom-class="dialog-add-container"
                            :before-close="handleAddClose">
                        <el-form :label-position="docListSpan == 24 ? 'top' : 'left'" :model="docSettingForm"
                                 class="doc-setting-form" :label-width="docListSpan == 24 ? '' : '160px'">
                            <el-form-item label="文档名称">
                                <el-input v-model="docSettingForm.name" placeholder="文档名称">
                                    <template slot="append">
                                        <el-button v-if="!docSettingForm.id" type="primary" @click="translateName"
                                                   :disabled="!docSettingForm.name">翻译
                                        </el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="文档名称(英文)">
                                <el-input v-model="docSettingForm.enName" placeholder="文档名称(英文)"
                                          :disabled="docSettingForm.id && docSettingForm.enName"></el-input>
                            </el-form-item>
                            <el-form-item label="侧边栏支持">
                                <el-switch v-model="docSettingForm.loadSidebar"></el-switch>
                                <el-alert
                                        title="默认加载的是项目根目录下的_sidebar.md文件"
                                        type="warning"
                                        :closable="false"
                                        show-icon style="display: inline;margin-left: 8px;">
                                </el-alert>
                            </el-form-item>
                            <el-form-item label="导航栏支持">
                                <el-switch v-model="docSettingForm.loadNavbar"></el-switch>
                                <el-alert
                                        title="默认加载的是项目根目录下的_navbar.md文件"
                                        type="warning"
                                        :closable="false"
                                        show-icon style="display: inline;margin-left: 8px;">
                                </el-alert>
                            </el-form-item>
                            <el-form-item label="封面支持">
                                <el-switch v-model="docSettingForm.coverpage"></el-switch>
                                <el-alert
                                        title="默认加载的是项目根目录下的_coverpage.md文件"
                                        type="warning"
                                        :closable="false"
                                        show-icon style="display: inline;margin-left: 8px;">
                                </el-alert>
                            </el-form-item>
                            <el-form-item label="标题层级">
                                <el-input-number v-model="docSettingForm.maxLevel"
                                                 controls-position="right"></el-input-number>
                                <el-alert
                                        title="最大支持渲染的标题层级"
                                        type="warning"
                                        :closable="false"
                                        show-icon style="display: inline;margin-left: 8px;">
                                </el-alert>
                            </el-form-item>
                            <el-form-item label="生成目录最大层级">
                                <el-input-number v-model="docSettingForm.subMaxLevel" controls-position="right" :min="2"
                                                 :max="4"></el-input-number>
                                <el-alert
                                        title="自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4）"
                                        type="warning"
                                        :closable="false"
                                        show-icon style="display: inline;margin-left: 8px;">
                                </el-alert>
                            </el-form-item>
                            <el-form-item label="合并导航栏">
                                <el-switch v-model="docSettingForm.mergeNavbar"></el-switch>
                                <el-alert
                                        title="小屏设备下合并导航栏到侧边栏"
                                        type="warning"
                                        :closable="false"
                                        show-icon style="display: inline;margin-left: 8px;">
                                </el-alert>
                            </el-form-item>
                            <el-form-item label="开启搜索">
                                <el-switch v-model="docSettingForm.search"></el-switch>
                            </el-form-item>
                            <el-form-item label="过期时间">
                                <el-input-number v-model="docSettingForm.shMaxAge"
                                                 controls-position="right"></el-input-number>
                                <el-alert
                                        title="过期时间，单位毫秒，默认一天"
                                        type="warning"
                                        :closable="false"
                                        show-icon style="display: inline;margin-left: 8px;">
                                </el-alert>
                            </el-form-item>
                            <el-form-item label="搜索框提示语">
                                <el-input v-model="docSettingForm.shPlaceholder"></el-input>
                            </el-form-item>
                            <el-form-item label="搜索无数据提示语">
                                <el-input v-model="docSettingForm.shNoData"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                    <el-popconfirm v-if="docSettingForm.id" title="确定删除该文档？" @confirm="deleteDocSetting">
                      <el-button type="danger" slot="reference" style="float: left;">删 除</el-button>
                    </el-popconfirm>
                    <el-button @click="dialogAddVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveDocSetting">确 定</el-button>
                </span>
                    </el-dialog>
                </el-col>
                <el-col v-if="dialogAddOrganizationVisible" :span="24">
                    <el-dialog
                            :title="dialogAddOrganizationTitle"
                            :visible.sync="dialogAddOrganizationVisible"
                            :close-on-press-escape="false"
                            :close-on-click-modal="false"
                            :fullscreen="docListSpan == 24"
                            width="60%"
                            top="5vh"
                            :before-close="handleAddOrganizationClose">
                        <el-form :model="organizationForm" :label-position="docListSpan == 24 ? 'top' : 'left'"
                                 class="organization-form" :label-width="docListSpan == 24 ? '' : '160px'">
                            <el-form-item label="组织名称">
                                <el-input v-model="organizationForm.organizationName" placeholder="组织名称">
                                    <template slot="append">
                                        <el-button v-if="!organizationForm.id" type="primary"
                                                   @click="translateOrganizationName"
                                                   :disabled="!organizationForm.organizationName">翻译
                                        </el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="组织名称(英文)">
                                <el-input v-model="organizationForm.path" placeholder="组织名称(英文)"
                                          :disabled="organizationForm.id && organizationForm.path"></el-input>
                            </el-form-item>
                            <el-form-item label="组织描述">
                                <el-input type="textarea" v-model="organizationForm.remark"
                                          placeholder="组织描述"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogAddOrganizationVisible = false">取 消</el-button>
                            <el-button type="primary" @click="saveOrganization">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-col>
                <el-col v-if="dialogShowUnRegisterListVisible" :span="24">
                    <el-dialog
                            title="未注册列表"
                            :visible.sync="dialogShowUnRegisterListVisible"
                            :close-on-press-escape="false"
                            :close-on-click-modal="false"
                            :fullscreen="docListSpan == 24"
                            width="60%"
                            top="5vh">
                        <el-table :data="showUnRegisterList" style="width: 100%">
                            <el-table-column prop="userName" label="用户名"></el-table-column>
                            <el-table-column prop="expireTime" label="过期时间"></el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template slot-scope="scope">
                                    <el-popconfirm title="确认删除吗？" @confirm="deleteUnRegister(scope.row.id)">
                                        <el-button slot="reference" type="danger" size="small" plain>删除</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="margin-top: 10px;">
                            <el-pagination
                                    @size-change="handleShowUnRegisterListSizeChange"
                                    @current-change="handleShowUnRegisterListCurrentChange"
                                    :small="docListSpan == 24"
                                    :current-page="showUnRegisterListCurrentPage"
                                    :page-sizes="[10, 20, 30, 50, 100]"
                                    :page-size="showUnRegisterListPageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="showUnRegisterListTotal">
                            </el-pagination>
                        </div>
                    </el-dialog>
                </el-col>
                <el-col v-if="drawerMoreContentShow && '#(superAdmin)' == userName" :span="24">
                    <el-drawer
                            :append-to-body="true"
                            :close-on-press-escape="false"
                            :show-close="false"
                            :visible.sync="drawerMoreContentShow"
                            :wrapperClosable="false"
                            :size="docListSpan == 24 ? '100%' : '50%'">
                        <template slot="title">
                            <el-page-header @back="closeDrawerMoreContent">
                                <template slot="content">
                                    <div style="position: relative; height: 24px;width: 100%;">
                                        <el-popconfirm
                                            title="是否退出登录"
                                            style="position: absolute;right: 0;top: 50%;transform: translateY(-50%)"
                                            confirm-button-text="退出"
                                            @confirm="logout"
                                        >
                                            <el-button  slot="reference" icon="el-icon-switch-button" size="mini" circle></el-button>
                                        </el-popconfirm>
                                    </div>
                                </template>
                            </el-page-header>
                        </template>
                        <el-tabs type="border-card" style="height: 100%; border: unset;">
                            <el-tab-pane label="用户管理">
                                <el-collapse v-model="userManageActive" accordion>
                                    <el-collapse-item title="修改密码" name="1">
                                        <el-form ref="editUserForm" :model="editUserForm" label-width="130px">
                                            <el-form-item label="原密码" prop="pwdOld">
                                                <el-input placeholder="请输入原密码" v-model="editUserForm.pwdOld" show-password></el-input>
                                            </el-form-item>
                                            <el-form-item label="新密码" prop="password">
                                                <el-input placeholder="请输入新密码" v-model="editUserForm.password" show-password></el-input>
                                            </el-form-item>
                                            <el-form-item label="再次输入新密码" prop="passwordSec">
                                                <el-input placeholder="请再次输入新密码" v-model="editUserForm.passwordSec" show-password></el-input>
                                            </el-form-item>
                                            <el-form-item style="text-align: right;margin-right: 10px;">
                                                <el-button plain @click="onResetEditUser">重 置</el-button>
                                                <el-button type="primary" @click="onEditUser">保 存</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </el-collapse-item>
                                    <el-collapse-item title="授权注册" name="2">
                                        <el-card shadow="never" style="border: unset;text-align: right;">
                                            <el-button type="info" icon="el-icon-s-operation" size="small" plain @click="onShowUnRegisterList">
                                                未注册列表
                                            </el-button>
                                        </el-card>
                                        <el-form ref="authRegisterUserForm" :model="authRegisterUserForm" label-width="130px">
                                            <el-form-item label="用户名" prop="userName">
                                                <el-input placeholder="请输入用户名" v-model="authRegisterUserForm.userName" ></el-input>
                                            </el-form-item>
                                            <el-form-item label="授权过期时间" prop="expireTime">
<!--                                                <el-input placeholder="请选择授权过期时间" v-model="authRegisterUserForm.expireTime" show-password></el-input>-->
                                                <el-date-picker
                                                        v-model="authRegisterUserForm.expireTime"
                                                        type="datetime"
                                                        placeholder="选择日期时间"
                                                        align="right"
                                                        :picker-options="authExpireTimePickerOptions">
                                                </el-date-picker>
                                            </el-form-item>
                                            <el-form-item style="text-align: right;margin-right: 10px;">
                                                <el-button plain @click="onResetAuthRegisterUser">重 置</el-button>
                                                <el-button type="primary" @click="onAuthRegisterUser">保 存</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </el-collapse-item>
                                </el-collapse>
                            </el-tab-pane>
                        </el-tabs>
                    </el-drawer>
                </el-col>
                <el-col :span="24" style="height: 100%;padding: 10px;">
                    <el-col :span="24" style="margin-bottom: 10px;height: 38px;position: relative;">
                        <el-alert type="info" show-icon :closable="false" style="display: inline-flex;">
                            <template slot="title">
                                帮助：请查看 <a href="https://docsify.js.org/#/zh-cn/" target="_blank">docsify官方文档</a>
                            </template>
                        </el-alert>
                        <el-button v-if="'#(superAdmin)' == userName" type="primary" icon="el-icon-more" size="small"
                                   @click="openDrawerMoreContent"
                                   style="position: absolute;right: 0; margin-right: 10px;top: 50%; transform: translateY(-50%);"
                                   circle></el-button>
                        <el-popconfirm
                                v-else
                                title="是否退出登录"
                                style="position: absolute;right: 0; margin-right: 10px; top: 50%;transform: translateY(-50%)"
                                confirm-button-text="退出"
                                @confirm="logout"
                        >
                            <el-button  slot="reference" type="warning" icon="el-icon-switch-button" size="mini" circle></el-button>
                        </el-popconfirm>
                    </el-col>
                    <el-col :span="24" style="height: calc(100% - 48px);">
                        <el-tabs
                                :tab-position="docListSpan == 24 ? 'top' : 'left'"
                                v-model="organizationTabValue"
                                @tab-click="organizationTabClick"
                                style="height: 100%;">
                            <el-tab-pane v-for="item in organizations" :key="item.id" :name="item.id"
                                         :label="item.organizationName">
                                <el-row :gutter="20">
                                    <el-col>
                                        <el-descriptions direction="vertical" title="组织信息" border>
                                            <template slot="title">
                                                <strong>组织信息</strong>
                                                <el-button type="text" icon="el-icon-edit" size="mini" circle
                                                           @click="openEditOrganizationDialog(item.id)"></el-button>
                                            </template>
                                            <el-descriptions-item v-if="item.remark"
                                                                  :label="item.remark"></el-descriptions-item>
                                        </el-descriptions>
                                    </el-col>
                                    <el-col v-if="docList.length > 0" :span="24" class="doc-list-tool"
                                            style="margin-top: 10px; margin-bottom: 10px;">
                                        <el-button type="primary" icon="el-icon-plus" size="small"
                                                   @click="openAddDocSetting">新增
                                        </el-button>
                                    </el-col>
                                    <el-col v-for="o in docList" :key="o.id" :span="docListSpan"
                                            class="doc-list-card-container"
                                            style="margin-top: 10px;">
                                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                                            <div style="padding: 14px;">
                                                <el-button type="text" @click="onViewDoc(o.id)"><strong
                                                        style="font-size: 16px;">{{o.name}}</strong></el-button>
                                                <el-button type="text" size="small" icon="el-icon-connection"
                                                           @click="copyGitUrl(o.gitUrl)" circle>
                                                </el-button>
                                                <div style="position: relative;margin-top: 10px;">
                                                    <time class="time">{{o.createTimeFormat}}</time>
                                                    <!--                        <el-button type="text" class="button"-->
                                                    <!--                                   style="position: absolute;right: 0;top: 50%;transform: translateY(-50%)"-->
                                                    <!--                                   @click="onViewDoc">查看-->
                                                    <!--                        </el-button>-->
                                                    <el-button type="text" class="button"
                                                               style="position: absolute;right: 0;top: 50%;transform: translateY(-50%)"
                                                               @click="editDocSetting(o.id)">编辑配置
                                                    </el-button>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-col>
                                    <el-col v-if="docList.length <= 0" style="height: 100%;width: 100%;">
                                        <el-empty>
                                            <el-button type="primary" icon="el-icon-plus" size="small"
                                                       @click="openAddDocSetting">新增
                                            </el-button>
                                        </el-empty>
                                    </el-col>
                                    <el-col v-if="docList.length > 0" :span="24" class="doc-list-pagination"
                                            style="padding: 10px;">
                                        <el-pagination
                                                @size-change="docListHandleSizeChange"
                                                @current-change="docListHandleCurrentChange"
                                                :small="docListSpan == 24"
                                                :current-page="docListCurrentPage"
                                                :page-sizes="[36, 48, 60, 72, 120]"
                                                :page-size="docListPageSize"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :total="docListTotal">
                                        </el-pagination>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                userManageActive: '1',
                drawerMoreContentShow: false,
                loginType: 'login',
                loginContainerSpan: 8,
                docListSpan: 4,
                dialogAddTitle: '新增文档',
                dialogAddVisible: false,
                activeName: 'user',
                docRootPath: '',
                form: {
                    userName: '',
                    password: ''
                },
                action: 'login',
                authorization: '',
                userId: '',
                userName: '',
                initSettingForm: {
                    name: '',
                    enName: '',
                    docOrgId: '',
                    loadSidebar: true,
                    loadNavbar: true,
                    coverpage: true,
                    maxLevel: 5,
                    subMaxLevel: 2,
                    mergeNavbar: true,
                    search: true,
                    shMaxAge: 86400000,
                    shPlaceholder: '搜索',
                    shNoData: '找不到结果',
                    shPaths: 'auto',
                    shHideOtherSidebarContent: false,
                    shNamespace: 'jf-docsify-namespace'
                },
                docSettingForm: {},
                docList: [],
                docListCurrentPage: 1,
                docListPageSize: 36,
                docListTotal: 0,
                organizationTabValue: '',
                dialogAddOrganizationVisible: false,
                dialogAddOrganizationTitle: '新增组织',
                organizationForm: {},
                initOrganizationForm: {
                    organizationName: '',
                    path: '',
                    userId: '',
                    remark: ''
                },
                organizations: [],
                initEditUserForm: {
                    userName: '',
                    password: '',
                    pwdOld: ''
                },
                editUserForm: {
                    userName: '',
                    password: '',
                    pwdOld: ''
                },
                initAuthRegisterUserForm: {
                    userName: '',
                    expireTime: ''
                },
                authRegisterUserForm: {
                    userName: '',
                    expireTime: ''
                },
                authExpireTimePickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            var date = new Date();
                            date.setHours(23, 59, 59);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '明天',
                        onClick(picker) {
                            const date = new Date();
                            date.setHours(23, 59, 59);
                            date.setTime(date.getTime() + 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '后天',
                        onClick(picker) {
                            const date = new Date();
                            date.setHours(23, 59, 59);
                            date.setTime(date.getTime() + 3600 * 1000 * 24 * 2);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '三天后',
                        onClick(picker) {
                            const date = new Date();
                            date.setHours(23, 59, 59);
                            date.setTime(date.getTime() + 3600 * 1000 * 24 * 3);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                dialogShowUnRegisterListVisible: false,
                showUnRegisterList: [],
                showUnRegisterListCurrentPage: 1,
                showUnRegisterListPageSize: 10,
                showUnRegisterListTotal: 0,
            }
        },
        created() {
            var _this = this;
            _this.loginType = 'login';
            this.action = localStorage.getItem("action") || 'login';
            this.authorization = localStorage.getItem("authorization");
            if (this.authorization) {
                axios.defaults.headers.common['Authorization'] = this.authorization;
                axios({
                    method: "POST",
                    url: "/admin/validate/token"
                }).then(response => {
                    var data = response.data;
                    if (data && data.success) {
                        _this.userId = data.data['userId'];
                        _this.userName = data.data['userName'];
                        if (!data.data['isActive']) {
                            _this.authorization = '';
                            localStorage.removeItem("authorization");
                            _this.action = 'login';
                            document.head.getElementsByTagName("title")[0].innerHTML = '登录';
                            localStorage.setItem("action", this.action);
                        }
                    }
                });
                _this.loadOrganizations();
            }
            window.onresize = function () {
                _this.resetLoginWidth();
                _this.resetDocListWidth();
            }
            _this.resetLoginWidth();
            _this.resetDocListWidth();
        },
        watch: {
            action: function (newVal, oldVal) {
                localStorage.setItem("action", newVal);
            },
            authorization: function (newVal, oldVal) {
                localStorage.setItem("authorization", newVal);
            }
        },
        methods: {
            resetLoginWidth() {
                var $app = document.getElementById("app");
                if ($app) {
                    var appContainerWidth = $app.clientWidth;
                    if (appContainerWidth < 975) {
                        this.loginContainerSpan = 24;
                    } else {
                        this.loginContainerSpan = 8;
                    }
                }
            },
            resetDocListWidth() {
                var _this = this;
                this.$nextTick(function () {
                    var $mainContainer = document.getElementById("main-container");
                    if ($mainContainer) {
                        var containerWidth = $mainContainer.clientWidth;
                        var number = containerWidth / 320;
                        number = number < 2 ? 1 : number;
                        _this.docListSpan = Math.ceil(24 / number);
                    }
                })
            },
            addOrganizationBtn() {
                var addBtnContainerId = 'add-organization-btn-container';
                var $containerEle = document.getElementById(addBtnContainerId);
                if ($containerEle) {
                    return;
                }
                var _this = this;
                var div = document.createElement('div');
                div.id = addBtnContainerId;
                div.style.zIndex = '3';
                div.style.position = 'relative';
                var btn = document.createElement('button');
                btn.type = 'button';
                btn.style.margin = "0 20px";
                btn.classList = 'el-button el-button--primary el-button--small';
                var iEle = document.createElement('i');
                iEle.classList = 'el-icon-plus';
                btn.append(iEle);
                var txtEle = document.createElement('span');
                txtEle.innerText = '新增组织';
                btn.append(txtEle);
                btn.onclick = function (e) {
                    if (window.event) {
                        window.event.cancelBubble = true;
                    }
                    e.preventDefault();
                    _this.openAddOrganizationDialog();
                }
                div.append(btn);
                setTimeout(function () {
                    document.querySelector("div[role='tablist']").before(div);
                }, 500);
            },
            openAddOrganizationDialog() {
                this.dialogAddOrganizationVisible = true;
                this.organizationForm = JSON.parse(JSON.stringify(this.initOrganizationForm));
                this.dialogAddOrganizationTitle = '新增组织';
            },
            openEditOrganizationDialog(id) {
                var _this = this;
                axios({
                    method: "GET",
                    url: "/docs/organizations/find/" + id
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        this.organizationForm = response.data.data;
                        this.dialogAddOrganizationVisible = true;
                        _this.dialogAddOrganizationTitle = '编辑组织';
                    }
                    _this.showError(response);
                });
            },
            loadOrganizations() {
                var _this = this;
                axios({
                    method: "GET",
                    url: "/docs/organizations"
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        var htmlTitle = "文章列表";
                        var data = response.data.data;
                        if (data && data.length > 0) {
                            htmlTitle = data[0].organizationName;
                            _this.organizations = data || [];
                            _this.organizationTabValue = data[0].id;
                            _this.loadDocList();
                        }
                        _this.action = 'docList';
                        _this.addOrganizationBtn();
                        document.head.getElementsByTagName("title")[0].innerHTML = htmlTitle;
                    }
                });
            },
            switchLoginType() {
                if (this.loginType == 'login') {
                    this.loginType = 'register'
                } else {
                    this.loginType = 'login'
                }
            },
            onSubmit() {
                var _this = this;
                _this.action = 'login';
                var reqUrl = "/admin/login/do";
                if (_this.loginType != 'login') {
                    reqUrl = "/user/register";
                }
                var form = JSON.parse(JSON.stringify(_this.form));
                form.password = CryptoJS.MD5(form.password).toString();
                axios({
                    method: "POST",
                    url: reqUrl,
                    data: form
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        if (_this.loginType == 'login') {
                            _this.authorization = response.headers['authorization'];
                            var data = response.data.data;
                            _this.userId = data.userId;
                            _this.userName = data.userName;
                            axios.defaults.headers.common['Authorization'] = _this.authorization;
                            _this.loadOrganizations();
                            _this.$message.success("登录成功");
                            return;
                        }
                        // 注册
                        _this.$message.success("注册成功");
                        _this.loginType = 'login';
                        return;
                    }
                    _this.showError(response);
                });
            },
            onResetAuthRegisterUser() {
                this.$refs['authRegisterUserForm'].resetFields();
            },
            onAuthRegisterUser() {
                var _this = this;
                var userName = _this.authRegisterUserForm.userName;
                if (!userName) {
                    this.$message.error("用户名不能为空");
                    return;
                }
                var expireTime = _this.authRegisterUserForm.expireTime;
                if (!expireTime) {
                    this.$message.error("授权过期时间不能为空");
                    return;
                }
                var form = JSON.parse(JSON.stringify(_this.authRegisterUserForm));
                axios({
                    method: "POST",
                    url: "/auth/register/add",
                    data: form
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        _this.$message.success("新增授权注册用户成功");
                        _this.onResetAuthRegisterUser();
                    }
                    _this.showError(response);
                });
            },
            onResetEditUser() {
                this.$refs['editUserForm'].resetFields();
            },
            onEditUser() {
                var _this = this;
                var form = JSON.parse(JSON.stringify(_this.editUserForm));
                if (!form.pwdOld) {
                    _this.$message.error("原密码不能为空");
                    return;
                }
                if (!form.password) {
                    _this.$message.error("新密码不能为空");
                    return;
                }
                if (!form.passwordSec) {
                    _this.$message.error("请再次输入新密码");
                    return;
                }
                if (form.password !== form.passwordSec) {
                    _this.$message.error("两次输入密码不一致");
                    return;
                }
                form.password = CryptoJS.MD5(form.password).toString();
                form.pwdOld = CryptoJS.MD5(form.pwdOld).toString();
                form.userName = _this.userName;
                delete form.passwordSec;
                axios({
                    method: "POST",
                    url: "/user/update",
                    data: form
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        _this.$message.success("密码修改成功， 请重新登录");
                        _this.editUserForm = JSON.parse(JSON.stringify(_this.initEditUserForm));
                        _this.logout();
                    }
                    _this.showError(response);
                });
            },
            loadDocList() {
                var _this = this;
                axios({
                    method: "GET",
                    url: "/docs/docList/" + _this.organizationTabValue + "?currentPage=" + _this.docListCurrentPage + "&pageSize=" + _this.docListPageSize
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        _this.action = 'docList';
                        document.head.getElementsByTagName("title")[0].innerHTML = '文章列表'
                        _this.docList = response.data.data.list;
                        _this.docListTotal = response.data.data.totalRow;
                    }
                });
            },
            onViewDoc(docId) {
                window.open("/docs/index/" + (this.userId || 'userId') + "/" + (docId || 'docId'));
            },
            copyGitUrl(gitUrl) {
                var copyEle = document.createElement("textarea");
                copyEle.id = 'copyTextarea';
                copyEle.innerText = gitUrl;
                document.body.append(copyEle);
                copyEle.select();
                document.execCommand('copy');
                this.$message.success('文档克隆地址复制成功');
                copyEle.remove();
            },
            handleAddOrganizationClose() {
                this.dialogAddOrganizationVisible = false;
            },
            handleAddClose() {
                this.dialogAddVisible = false;
            },
            openAddDocSetting() {
                this.docSettingForm = JSON.parse(JSON.stringify(this.initSettingForm));
                this.dialogAddVisible = true;
                this.dialogAddTitle = '新增文档';
            },
            saveDocSetting() {
                var _this = this;
                var id = _this.docSettingForm.id;
                _this.docSettingForm.docOrgId = _this.organizationTabValue;
                axios({
                    method: "POST",
                    url: "/docs/saveDocSetting",
                    data: _this.docSettingForm
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        _this.dialogAddVisible = false;
                        _this.$message.success(!id ? '新增成功' : '更新成功');
                        _this.loadDocList();
                    }
                    _this.showError(response);
                });
            },
            saveOrganization() {
                var _this = this;
                var id = _this.organizationForm.id;
                axios({
                    method: "POST",
                    url: "/docs/organizations/save",
                    data: _this.organizationForm
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        _this.dialogAddOrganizationVisible = false;
                        _this.$message.success(!id ? '新增成功' : '更新成功');
                        _this.loadOrganizations();
                    }
                    _this.showError(response);
                });
            },
            editDocSetting(id) {
                var _this = this;
                axios({
                    method: "GET",
                    url: "/docs/findDocSetting/" + id
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        _this.docSettingForm = response.data.data;
                        _this.dialogAddVisible = true;
                        _this.dialogAddTitle = '编辑文档';
                    }
                    _this.showError(response);
                });
            },
            docListHandleSizeChange(pageSize) {
                this.docListPageSize = pageSize;
                this.docListCurrentPage = 1;
                this.loadDocList();
            },
            docListHandleCurrentChange(page) {
                this.docListCurrentPage = page;
                this.loadDocList();
            },
            deleteDocSetting() {
                var _this = this;
                axios({
                    method: "POST",
                    url: "/docs/deleteDocSetting/" + _this.docSettingForm.id,
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        _this.dialogAddVisible = false;
                        _this.$message.success('删除成功');
                        _this.loadDocList();
                    }
                    _this.showError(response);
                });
            },
            translateName() {
                var _this = this;
                if (!_this.docSettingForm.name) {
                    _this.$message.error('请先输入文档名称');
                    return;
                }
                axios({
                    method: "GET",
                    url: "/docs/translate/" + _this.docSettingForm.name,
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        _this.docSettingForm.enName = response.data.data
                        if (!_this.docSettingForm.enName) {
                            this.$message.error("无翻译结果，请手动输入")
                        }
                    }
                    _this.showError(response);
                });
            },
            translateOrganizationName() {
                var _this = this;
                if (!_this.organizationForm.organizationName) {
                    _this.$message.error('请先输入组织名称');
                    return;
                }
                axios({
                    method: "GET",
                    url: "/docs/translate/" + _this.organizationForm.organizationName,
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        _this.organizationForm.path = response.data.data
                        if (!_this.organizationForm.path) {
                            this.$message.error("无翻译结果，请手动输入")
                        }
                    }
                    _this.showError(response);
                });
            },
            organizationTabClick(tab) {
                this.docList = [];
                this.docListCurrentPage = 1;
                this.docListPageSize = 36;
                this.docListTotal = 0;
                this.loadDocList();
            },
            openDrawerMoreContent() {
                this.drawerMoreContentShow = true;
            },
            closeDrawerMoreContent() {
                this.drawerMoreContentShow = false;
            },
            logout() {
                var _this = this;
                axios({
                    method: "POST",
                    url: "/admin/logout",
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        localStorage.removeItem("authorization");
                        _this.userId = '';
                        _this.userName = '';
                        axios.defaults.headers.common['Authorization'] = '';
                        _this.action = 'login';
                        document.head.getElementsByTagName("title")[0].innerHTML = '登录'
                        _this.closeDrawerMoreContent();
                        _this.$message.success("退出成功");
                    }
                    _this.showError(response);
                });
            },
            onShowUnRegisterList() {
                var _this = this;
                _this.dialogShowUnRegisterListVisible = true;
                _this.loadShowUnRegisterList();
            },
            loadShowUnRegisterList() {
                var _this = this;
                axios({
                    method: "GET",
                    url: "/auth/register/list" + "?currentPage=" + _this.showUnRegisterListCurrentPage + "&pageSize=" + _this.showUnRegisterListPageSize
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        _this.showUnRegisterList = response.data.data.list;
                        _this.showUnRegisterListTotal = response.data.data.totalRow;
                    }
                });
            },
            handleShowUnRegisterListSizeChange(pageSize) {
                this.showUnRegisterListPageSize = pageSize;
                this.showUnRegisterListCurrentPage = 1;
                this.loadShowUnRegisterList();
            },
            handleShowUnRegisterListCurrentChange(page) {
                this.showUnRegisterListCurrentPage = page;
                this.loadShowUnRegisterList();
            },
            deleteUnRegister(id) {
                var _this = this;
                axios({
                    method: "POST",
                    url: "/auth/register/delete/" + id,
                }).then(response => {
                    if (response.data && response.data.code == 0) {
                        _this.$message.success("删除成功");
                        if (Math.ceil((_this.showUnRegisterListTotal - 1) / _this.showUnRegisterListPageSize) < _this.showUnRegisterListCurrentPage) {
                            _this.showUnRegisterListCurrentPage = _this.showUnRegisterListCurrentPage - 1;
                            if (_this.showUnRegisterListCurrentPage <= 0) {
                                _this.showUnRegisterListCurrentPage = 1;
                            }
                        }
                        _this.loadShowUnRegisterList();
                    }
                    _this.showError(response);
                });
            },
            showError(response) {
                if (response.data && !response.data.success && response.data.code != 0 && response.data.msg) {
                    this.$message.error(response.data.msg);
                }
            }
        }
    })
</script>
</html>